<!doctype html>
<html lang="en-GB">
<head>
  <meta charset="utf-8">
  <style>
    body {
      background: #fafafa;
    }
  </style>
</head>
<body>
<div id="demo"></div>

<script type="module">
  import { html, render } from 'lit';
  import '../src/doc/furo-demo-snippet.js';
  import '../src/doc/light-bulb.js';


  render(
    html`
      <furo-demo-snippet  style="height: 150px">
        <template>
          <!-- This button acts as a light switch -->
          <input type='color' at-input='--color(*.path.0.value)' value='#fee753' at-change="^color-changed(*.path.0.value)" at-color-changed="((color))">
          <button at-click="--lightSwitchClicked">i am a lightswitch</button>
          <button at-click="--newColor(color)">setColor</button>
          <light-bulb fn-toggle="--lightSwitchClicked" on fn-set-color="--newColor"></light-bulb>
        </template>
      </furo-demo-snippet>
      `,
    document.querySelector('#demo')
  );
</script>
</body>
</html>
